<template>
    <Card v-bind:attrs>
        <template #front>
            <div class="frontface">
                <Name class="name">{{ name }}</Name>
                <div class="token-list">
                    <Token v-for="(tokenObject, tokenName) in tokens" :type="tokenName" :sup="String(tokenObject.base)">
                    </Token>
                </div>
                <div class="state-list">
                    <State v-for="state in states" :key="state.name" :type="state.name"></State>
                </div>
            </div>
        </template>
        <template #back>
            <div class="backface"></div>
        </template>
    </Card>
</template>

<script lang="ts" setup>
import { LordCardObject } from '@/types/game/card';
import Card from './card.vue';
import Token from '../token.vue';
import State from '../state.vue';
import Name from '../name.vue';
const { country, name, tokens, states, ...attrs } = defineProps<LordCardObject>()
</script>

<style scoped>
.frontface,
.backface {
    border: 1vmin solid white;
    padding: 3vmin;
    border-radius: 5px;
}

.frontface {
    display: flex;
    position: relative;
}

.backface {
    position: relative;
}

.country-name {
    position: absolute;
    left: calc(-1vmin - 20px / 2);
    top: calc(-1vmin - 20px / 2);
}
</style>